package com.kmmlearn.findtime.android.ui

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.EnterExitState
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import com.kmmlearn.findtime.android.ui.animation.AnimateAsStateDemo1
import com.kmmlearn.findtime.android.ui.animation.AnimateAsStateDemo2
import com.kmmlearn.findtime.android.ui.animation.AnimateContentSizeDemo
import com.kmmlearn.findtime.android.ui.animation.AnimatedContentDemo
import com.kmmlearn.findtime.android.ui.animation.CrossfadeDemo
import com.kmmlearn.findtime.android.ui.animation.SizeTransformDemo
import com.kmmlearn.findtime.android.ui.components.DraggableCardM3
import com.kmmlearn.findtime.android.ui.components.MultiActionAnchoredCard
import com.kmmlearn.findtime.android.ui.components.StickyHeaderList

@Composable
fun AnimatedScreen() {
//    AnimatedVisibilityStateDemo()
//    ChildAnimatedVisibilityDemo()
//    DraggableCardM3()
//    MultiActionAnchoredCard("Draggable Card", "drag me")
//    StickyHeaderList()
//    AnimatedContentDemo()
//    SizeTransformDemo()
//    CrossfadeDemo()
//    AnimateContentSizeDemo()
    Row {
        AnimateAsStateDemo1()
        AnimateAsStateDemo2()
    }
}


@Composable
fun ChildAnimatedVisibilityDemo() {

    var visible by remember { mutableStateOf(false) }

    Column {
        AnimatedVisibility(
            visible = visible,
            enter = fadeIn(),
            exit = fadeOut()
        ) {

            val backgroundColor by transition.animateColor {
                    state -> if (state == EnterExitState.Visible) Color.Gray else MaterialTheme.colorScheme.primaryContainer
            }
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(backgroundColor)
                    .height(200.dp)
            ) {
                Box(
                    // 单独设置子元素的动画效果
                    modifier = Modifier.align(Alignment.Center)
                        .animateEnterExit(
                            enter = slideInHorizontally(),
                            exit = slideOutHorizontally()
                        )
                        .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                        .background(Color.Red)
                ) {}
            }

        }


    }
    Button(onClick = { visible = !visible }, modifier = Modifier.padding(top = 200.dp)) {
        Text("Convert Visible", color = Color.White)
    }

}


enum class AnimState {
    VISIBLE,
    INVISIBLE,
    APPEARING,
    DISAPPEARING
}

fun MutableTransitionState<Boolean>.getAnimState(): AnimState {
    return when {
        currentState && isIdle -> AnimState.VISIBLE
        !isIdle && currentState -> AnimState.DISAPPEARING
        isIdle && !currentState -> AnimState.INVISIBLE
        else -> AnimState.APPEARING
    }
}

@Composable
fun AnimatedVisibilityStateDemo() {
    // 创建一个MutableTransitionState对象，并设置初始状态为false，目标状态为true
    // 由于两个状态不同，动画会立即执行
    val state = remember {
        MutableTransitionState(false).apply {
            targetState = true
        }
    }

    Column {
        AnimatedVisibility(visibleState = state) {

            val backgroundColor by transition.animateColor {
                state -> if (state == EnterExitState.Visible) MaterialTheme.colorScheme.primaryContainer else Color.Gray
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(backgroundColor)
                    .height(200.dp)
            ) {
                Text(
                    "Animated Screen ${state.getAnimState()}",
                    modifier = Modifier.fillMaxWidth(),
                    style = MaterialTheme.typography.headlineLarge,
                )
            }
        }
    }
}


@Composable
fun AnimatedVisibilityDemo() {

    var visible by remember { mutableStateOf(false) }

    // 像素密度，可以通过像素密度把dp转换为像素
    val density = LocalDensity.current

    Column {
        AnimatedVisibility(
            visible = visible,
            enter = fadeIn(initialAlpha = 0.3f),
            exit = fadeOut()
//            enter = slideInVertically { with(density) { -40.dp.roundToPx() } }
//                    + expandVertically(expandFrom = Alignment.Top) + fadeIn(initialAlpha = 0.3f),
//            exit = slideOutVertically() + shrinkVertically() + fadeOut()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MaterialTheme.colorScheme.primaryContainer)
                    .height(200.dp)
            ) {
                Text(
                    "Animated Screen",
                    modifier = Modifier.fillMaxWidth(),
                    style = MaterialTheme.typography.headlineLarge,
                )
            }

        }


    }
    Button(onClick = { visible = !visible }, modifier = Modifier.padding(top = 200.dp)) {
        Text("Convert Visible", color = Color.White)
    }

}